
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>YUI configuration to filter log messages</title>

<style type="text/css">
/*margin and padding on body element
  can introduce errors in determining
  element position and are not recommended;
  we turn them off as a foundation for YUI
  CSS treatments. */
body {
	margin:0;
	padding:0;
}
</style>

<link type="text/css" rel="stylesheet" href="../../build/cssfonts/fonts-min.css" />
<script type="text/javascript" src="../../build/yui/yui-min.js"></script>


<!--begin custom header content for this example-->
<style type="text/css">
#console {
    position: static;
    float: left;
}
#demo .yui-console .yui-console-title {
    border: 0 none;
    color: #000;
    font-size: 13px;
    font-weight: bold;
    margin: 0;
    text-transform: none;
}

#demo .yui-console .yui-console-entry-meta {
    margin: 0;
}

.filter-controls p label {
    display: block;
    margin: .25em 0;
}
#demo input {
    vertical-align: middle;
}

.form {
    clear: left;
    padding: 1em 0;
}

.form span {
    padding-left: 3em;
}

#msg {
    width: 50%;
}

.filter-controls {
    width: 180px;
    margin-left: 1em;
    float: left;
}

#preview {
    background: #eee;
    border: 1px solid #999;
    margin: 1em 0;
    overflow: auto;
    padding: 1em;
    width: 480px;
}
</style>

<!--end custom header content for this example-->

</head>

<body class=" yui-skin-sam">

<h1>YUI configuration to filter log messages</h1>

<div class="exampleIntro">
	<p>This example illustrates how to configure your YUI instance to ignore certain log messages to aid in reducing the signal-to-noise ratio when debugging.</p>

<p>Log messages filtered out from the YUI config are permanently ignored.  If you want to be able to temporarily hide and reshow messages, use the <a href="../../console-filters.html">ConsoleFilters plugin</a>.  It is not uncommon to set up <code>logInclude</code> or <code>logExclude</code> in the YUI configuration and use the ConsoleFilters plugin.</p>

<p>Log messages can be ignored based on the source (e.g. <code>event</code> or <code>attribute</code>) or based on their log level (info, warn, error).</p>
			
</div>

<!--BEGIN SOURCE CODE FOR EXAMPLE =============================== -->

<div id="demo">
    <div id="console"></div>

    <div class="filter-controls">
        <h4>Source filter</h4>
        <p>
            <select id="incexc">
                <option value="logExclude" selected="selected">Exclude</option>
                <option value="logInclude">Include</option>
            </select>
            <label for="filter_a"><input type="checkbox" name="src_filter" value="sourceA" id="filter_a"> <code>sourceA = true</code></label>
            <label for="filter_b"><input type="checkbox" name="src_filter" value="sourceB" id="filter_b"> <code>sourceB = true</code></label>
            <label for="filter_c"><input type="checkbox" name="src_filter" value="sourceC" id="filter_c" checked="checked"> <code>sourceC = true</code></label>
        </p>
    </div>

    <div class="filter-controls">
        <h4>Log level</h4>
        <p>
            <label for="lvl_info">
                <input type="radio" name="log_level" id="lvl_info" value="info" checked="checked">
                <code>LOG_LEVEL_INFO</code>
            </label>
            <label for="lvl_warn">
                <input type="radio" name="log_level" id="lvl_warn" value="warn">
                <code>LOG_LEVEL_WARN</code>
            </label>
            <label for="lvl_error">
                <input type="radio" name="log_level" id="lvl_error" value="error">
                <code>LOG_LEVEL_ERROR</code>
            </label>
        </p>
    </div>

    <div class="form">
        <h4>Log a message</h4>
        <div>
            <input type="text" id="msg" value="This is a log message!">
            <button type="button" id="log">log message</button>

            <p>
                Source:
                <label for="msg_src_a">
                    <input type="radio" name="msg_src" id="msg_src_a" value="sourceA" checked="checked">
                    A
                </label>
                <label for="msg_src_b">
                    <input type="radio" name="msg_src" id="msg_src_b" value="sourceB">
                    B
                </label>
                <label for="msg_src_c">
                    <input type="radio" name="msg_src" id="msg_src_c" value="sourceC">
                    C
                </label>

                <span>Category:</span>
                <label for="msg_info">
                    <input type="radio" name="msg_cat" id="msg_info" value="info" checked="checked">
                    info
                </label>
                <label for="msg_warn">
                    <input type="radio" name="msg_cat" id="msg_warn" value="warn">
                    warn
                </label>
                <label for="msg_error">
                    <input type="radio" name="msg_cat" id="msg_error" value="error">
                    error
                </label>
            </p>
        </div>

        <h4>Code preview</h4>
        <pre id="preview">// YUI instance configuration
var Y = YUI({
    "logLevel": "info",
    "logExclude": {
        "sourceC": true
    }
});

// Log statement
Y.log(&quot;This is a log message!&quot;, &quot;info&quot;, &quot;sourceA&quot;);</pre>
    </div>
</div>
<script type="text/javascript">
YUI({base:"../../build/", timeout: 10000}).use("console", "selector-css3", "json-stringify", function (Y) {

// To eliminate duplicate reporting in native console in supporting browsers
Y.config.useBrowserConsole = false;

// Add the default filtering of sourceC messages
Y.config.logExclude = {
    sourceC : true
};

// Create and render the Console
var yconsole = new Y.Console({ boundingBox: '#console' }).render();


// Set up event listeners
// Log source checkboxes
Y.all('#demo input[name=src_filter]').on('click', function (e) {
    var disposition = Y.get('#incexc').get('value'),
        src = e.target;

    if (src.get('checked')) {
        Y.config[disposition] = Y.config[disposition] || {};
        Y.config[disposition][src.get('value')] = true;
    } else {
        delete Y.config[disposition][src.get('value')];
        if (!Y.Object.size(Y.config[disposition])) {
            delete Y.config[disposition];
        }
    }
    updatePreview();
});

// Source include or exclude select
Y.get('#incexc').on('change', function () {
    if (this.get('value') === 'logInclude') {
        Y.config.logInclude = Y.config.logExclude;
        delete Y.config.logExclude;
    } else {
        Y.config.logExclude = Y.config.logInclude;
        delete Y.config.logInclude;
    }
    updatePreview();
});

// Log level radio group
Y.all('#demo input[name=log_level]').on('click', function (e) {
    var lvl = e.target;

    if (lvl.get('checked')) {
        yconsole.set('logLevel', lvl.get('value'));
        updatePreview();
    }
});

// Log message input and radio groups
Y.get('#msg').on('keyup', updatePreview);
Y.all('#demo input[name=msg_src]').on('click', updatePreview);
Y.all('#demo input[name=msg_cat]').on('click',  updatePreview);

// Log message button
Y.get('#log').on('click', function (e) {
    var msg = Y.get('#msg').get('value'),
        cat = Y.get('#demo input[name=msg_cat]:checked').get('value'),
        src = Y.get('#demo input[name=msg_src]:checked').get('value');

    Y.log(msg,cat,src);
});

// Support function
function updatePreview() {
    var filters   = Y.all('#demo input[name=src_filter]:checked'),
        cfg = {
            logLevel: Y.get('#demo input[name=log_level]:checked').get('value')
        };

    if (filters.size()) {
        cfg[Y.get('#incexc').get('value')] = Y.Array.hash(filters.get('value'));
    }

    Y.get('#preview').set('text',Y.substitute(
        "// YUI instance configuration\n" +
        "var Y = YUI({cfg});\n\n" +
        "// Log statement\n" +
        'Y.log("{msg}", "{lvl}", "{src}");',
        {
            cfg: Y.JSON.stringify(cfg, null, 4),
            msg: Y.get('#msg').get('value'),
            lvl: Y.get('#demo input[name=msg_cat]:checked').get('value'),
            src: Y.get('#demo input[name=msg_src]:checked').get('value')
        }));
}

});
</script>

<!--END SOURCE CODE FOR EXAMPLE =============================== -->

</body>
</html>
